<script lang="ts" setup>
</script>

<template>
    <!-- 文本域 -->
    <u-layout
        :enable-refresh="false"
        title="文本域组件示例"
    >
        <!-- 容器 -->
        <view class="container">
            <view class="line">
                <u-text text="基础使用" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea placeholder="请输入" />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自动增高" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :auto-height="true"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="下划线模式" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :count="true"
                                border="bottom"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义文本颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                color="#ff0000"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义文本大小" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :font-size="12"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="右对齐" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                placeholder="请输入"
                                text-align="right"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="自定义边框颜色" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                border-color="#ff0000"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="显示一键清除" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :clearable="true"
                                :count="true"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="只读" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :readonly="true"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>

            <view class="line">
                <u-text text="禁用" />
                <view class="block">
                    <view class="ui-block-control">
                        <view class="ui-block">
                            <u-textarea
                                :value="`已被禁用`"
                                :disabled="true"
                                placeholder="请输入"
                            />
                        </view>
                    </view>
                </view>
            </view>
        </view>
        <!-- //容器 -->
    </u-layout>
    <!-- //文本域 -->
</template>

<style lang="scss" scoped>
    // 容器
    .container
    {
        .line
        {
            .title
            {
                font-size: 14px;
                line-height: 20px;
            }

            .block
            {
                overflow: hidden;
                margin-top: 4px;
            }

            &:not(:first-child)
            {
                margin-top: 16px;
            }
        }
    }
</style>